<template>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
        <template #header>
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="2">
                    <el-button type="primary" @click="addDialogVisible = true">添加</el-button>
                </el-col>
            </el-row>
        </template>

        

    </el-card>


    <!-- 添加对话框 -->
    <el-dialog title="添加" v-model="addDialogVisible" width="60%" align-center>

        <el-form :model="addForm" label-position="right" label-width="80px">
            <el-form-item label="事件主题">
                <el-input v-model="addForm.create_time" placeholder="事件主题" />
            </el-form-item>
            <el-form-item label="事件内容">
                <el-input  :rows="2" type="textarea" placeholder="事件内容" />
            </el-form-item>
            <el-form-item label="事件日期">
                <el-date-picker  type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="时间日期" />
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addFormOp">确认</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 修改对话框 -->
    <el-dialog title="修改" v-model="editDialogVisible" width="60%" align-center>

        <el-form :model="editForm" label-position="right" label-width="80px">
            <el-form-item label="事件主题">
                <el-input v-model="editForm.create_time" placeholder="事件主题" />
            </el-form-item>
            <el-form-item label="事件内容">
                <el-input  :rows="2" type="textarea" placeholder="事件内容" />
            </el-form-item>
            <el-form-item label="事件日期">
                <el-date-picker type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="时间日期" />
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="editFormOp">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Edit } from '@element-plus/icons-vue'

// ----数据定义区域 START----
let addDialogVisible = ref(false)
let editDialogVisible = ref(false)
const addForm = reactive({
    create_time: '',
    update_time: '',
})
const editForm = reactive({
    create_time: '',
    update_time: '',
})
let timeLineList = ref()
// ----数据定义区域 END----

// ----方法定义区域 START----
const getTimeLineList = () => {
}
const addFormOp = () => {
}

const editDialogShow = (identify: string) => {
}

const editFormOp = () => {
}

const resetData = () => {
}
// ----方法定义区域 END----


getTimeLineList()

</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit {
    display: inline;
}
</style>